import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd-mobile';
import { payQuery, pay } from './alipay';
import './index.module.scss';
const { useEffect } = React;

interface orderStatusProps {
  orderStatus: number;
}
export default function BottomButton(props: orderStatusProps) {
  const { orderStatus } = props;
  const navigate = useNavigate();
  let timeId: any;
  const handerclick = async (val: number) => {
    if (val === 3 || val === 4) {
      navigate('/');
    } else if (val === 2) {
      payTicket();
      const res: any = await payQuery({ outTradeNo: 2001 });
      if (res.status === 200) {
        timeId = setTimeout(() => {
          navigate('/orderFinish');
        }, 5000);
      }
    }
  };
  function payTicket() {
    pay({
      tradeNo: 1000,
      outTradeNo: new Date().getTime(),
      totalAmount: 1,
      subject: '开发测试使用',
    });
  }

  useEffect(() => {
    return () => {
      clearTimeout(timeId);
    };
  }, []);

  return (
    <div styleName="bottom-button">
      <Button
        styleName="pay-button"
        fill="none"
        onClick={() => {
          handerclick(orderStatus);
        }}
      >
        {orderStatus == 2
          ? '去支付'
          : orderStatus == 3 || orderStatus == 4
          ? '重新订购'
          : ''}
      </Button>
    </div>
  );
}
